<template>
    <div>
        <!-- <table width="400px" border="1px">
            <tr>
                <th>商品编号</th><th>商品名称</th><th>商品价格</th><th>商品品牌</th><th>商品类型</th><th>商品图片</th><th>商品描述</th><th>创建时间</th>
            </tr>
            <tr v-for="product in products">
                <td>{{product.id}}</td>
                <td>{{product.product_name}}</td>
                <td>{{product.price}}</td>
                <td>{{product.product_brand}}</td>
                <td>{{product.product_type}}</td>
                <td>{{product.product_image}}</td>
                <td>{{product.product_desc}}</td>
                <td>{{product.create_time}}</td>
            </tr>
        </table> -->
        <el-table :data="products" style="width: 100%" height="650px">
            <el-table-column fixed label="商品编号" width="150">
                <template slot-scope="scope">
                    <td>{{ scope.row.id }}</td>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" width="150">
                <template slot-scope="scope">
                    <td>{{ scope.row.product_name }}</td>
                </template>
            </el-table-column>
            <el-table-column label="商品价格" width="150">
                <template slot-scope="scope">
                    <td>{{ scope.row.price }}</td>
                </template>
            </el-table-column>
            <el-table-column label="商品品牌" width="150">
                <template slot-scope="scope">
                    <td>{{ scope.row.product_brand }}</td>
                </template>
            </el-table-column>
            <el-table-column label="商品类型" width="150">
                <template slot-scope="scope">
                    <td>{{ scope.row.product_type }}</td>
                </template>
            </el-table-column>
            <el-table-column label="商品图片" width="150">
                <template slot-scope="scope">
                    <td>{{ scope.row.product_image }}</td>
                </template>
            </el-table-column>
            <el-table-column label="商品描述" width="150">
                <template slot-scope="scope">
                    <td>{{ scope.row.product_desc }}</td>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="150">
                <template slot-scope="scope">
                    <td>{{ scope.row.product_image }}</td>
                </template>
            </el-table-column>
            <!-- 你可以在这里添加更多的列 -->
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: "ProductView",
    data() {
        return {
            //商品列表
            products: []
        }
    },
    methods: {
        //读取商品
        loadProducts() {
            //调用后台的方法，参数是url
            this.$http.get('product?m=findAll')
                .then(resp => {
                    //处理后台返回的结果
                    console.log(resp.data)
                    //数据绑定
                    if (resp.data.data) {
                        this.products = resp.data.data
                    }
                })
        },
        handleClick(row) {
            console.log(row);
            // this.products = row
        }
    },
    //页面挂载钩子
    mounted() {
        this.loadProducts()
    }
}
</script>

<style>
</style>